<template>
<!-- 该组件仅展示已认证的就诊人信息 -->
  <div class="shadow" v-show="rightPopup">
    <div class="select-role2" style="min-height:100vh;background:#f2f2f2;">
      <!-- <div class="tips-warning center">提示：未通过身份认证的就诊人请先进行身份认证</div> -->
      <div>
        <mu-flexbox class="family-item2 bgwhite re" v-for="f in familys.filter(v => v.certificationValidityPeriod === '1')" :key="f.id">
          <mu-flexbox-item>
            <div class="family-header" @click="selectPersonHandle(f)">
              <mu-flexbox>
                <mu-flexbox-item>
                  <img src="../assets/images/middle_man.png" v-if="f.sexcode===1" width="64" />
                  <img src="../assets/images/middle_women.png" v-else width="64" />
                </mu-flexbox-item>
                <mu-flexbox-item :grow="4">
                  <div>
                    <span class="title" style="color:#333;">{{f.realname}}</span>
                    <span
                      class="label label-success"
                      v-if="f.certificationValidityPeriod === '1'"
                    >已认证</span>
                    <span class="label label-warning" v-else>未认证</span>
                  </div>
                </mu-flexbox-item>
              </mu-flexbox>
            </div>
          </mu-flexbox-item>
        </mu-flexbox>
      </div>
    </div>

    <mu-dialog :open="showBindcardDialog">
      <div class="center">此就诊人尚未认证，去认证吗？</div>
      <div class="login center mt20">
        <mu-flat-button slot="actions" @click="showBindcardDialog=false" label="取消" />
        <mu-flat-button slot="actions" primary @click="bindConfirm" label="去认证" />
      </div>
    </mu-dialog>
    <mu-dialog :open="needCardDialog">
      <div class="center">
        此就诊人尚未办卡，请
        <span class="color-price">凭门诊号到医院自助机或窗口</span>进行办卡就诊。
      </div>
      <div class="login center mt20">
        <mu-flat-button slot="actions" primary @click="needCardDialog=false" label="确定" />
      </div>
    </mu-dialog>
  </div>
</template>

<script>
import { commonAjaxJson, RESTFUL_API, commonAjax } from "@/api/api";
import { getAgeFromBirthday } from "@/common/js/util";

export default {
  data() {
    return {
      hospitalCode: sessionStorage.getItem("hospitalCode") || "",
      rightPopup: false,
      familys: [],
      familyPerson: JSON.parse(sessionStorage.familyPerson || "{}"),
      showBindcardDialog: false,
      needCardDialog: false,
      sexcode: "",
      age: ""
    };
  },
  filters: {
    getAge(val) {
      return new Date().getFullYear() - val.slice(0, 4);
    }
  },
  props: {
    // 显示卡号
    showCardNumber: {
      type: Boolean,
      default: false
    },
    // 显示所有卡
    showAllCards: {
      type: Boolean,
      default: false
    },
    // 当面模块是否需要就诊卡
    needCard: {
      type: Number,
      default: 0
    },
    // 是否必须认证
    needCertificate: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.getFamilys();
  },
  methods: {
    show() {
      this.rightPopup = true;
    },
    /**
     * 修改人 李泽坤
     * 修改日期 2019.8.14
     * 修改功能描述 修改listFamily请求参数，匹配阿里生活号
     */
    getFamilys() {
      commonAjaxJson( `${RESTFUL_API.listFamily}`, {}, true ).then(res => {
        if (res.data.code == 200) {
          this.familys = res.data.data || [];
          // if (!this.familyPerson.realname) {
          //   this.rightPopup = true;
          // }
          // todo
          //            let fp = this.familyPerson
          //            const IS_CERT = fp.certificationValidityPeriod === '1'
          //            const HAS_PATIENT_NUMBER = !!fp.patientcodeNumber
          // 已认证
          //            if (IS_CERT) {
          //              if (HAS_PATIENT_NUMBER) {
          //                this.selectedNumber = fp.patientcodeNumber || ''
          //                this.selectedPerson = fp.realname
          //                this.$emit('familychang', fp)
          //              } else {
          //                const first = res.data.data[0]
          //                console.log(res.data.data[0])
          //                if (first.patientcode) {
          //                  if (!first.patientcodeNumber && first.hisBusCardList && first.hisBusCardList.length > 0) {
          //                    first.patientcodeNumber = first.hisBusCardList[0].patientMedicalCardNumber
          //                  }
          //                  this.selectedNumber = first.patientcodeNumber || ''
          //                  this.selectedPerson = first.realname
          //                  this.familyPerson = first
          //                  sessionStorage.familyPerson = JSON.stringify(first)
          //                  this.$emit('familychang', first)
          //                }
          //              }
          //            }
        } else {
          this.$store.commit("UPDATE_TOAST", {
            message: res.data.message
          });
        }
      });
    },
    bindConfirm() {
      this.$router.push("/setting/bind-visitcard");
    },
    selectPersonHandle(f) {
      if (this.needCertificate == 0) {
        f.age = getAgeFromBirthday(f.birthdate)
        if(f.age < 18) {
          this.$store.commit("UPDATE_TOAST", {
            message: "监护人须>18周岁，请重新选择"
          });
          return;
        }
        this.$emit("familychang", f);
        this.rightPopup = false;
        return;
      }
      // 没认证的提示认证
      if (f.certificationValidityPeriod !== "1") {
        sessionStorage.editFamily = JSON.stringify(f);
        this.showBindcardDialog = true;
        return;
      }
      // 已经认证
      const cards = f.hisBusCardList;

      // 已经认证，但是没卡，不操作。一般是系统出了问题
      if (cards.length === 0) {
        return;
      }
    },
  }
};
</script>

<style lang="less">
@import "../common/css/flex.css";

.mu-popup {
  &.role-popup-right {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 99999;
  }
}
.family-item2 {
  padding: 10px;
  margin-bottom: 0.6em;
  .default-arrow {
    background: url(../assets/images/tab_qhjzr.png) no-repeat;
    background-size: 40px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .title {
    font-size: 1.2em;
  }
  .icon-iconnan {
    color: #64a9f6;
    font-size: 0.9em;
  }
  .icon-iconnv {
    color: #f8868b;
    font-size: 0.9em;
  }
  p {
    margin: 0.6em 0 0 0;
    color: #666;
  }
  .right-button {
    position: absolute;
    right: 0;
    top: 0;
  }
  .min-height {
    // min-height: 40px;
    p {
      border-top: 1px solid #f2f2f2;
      padding: 10px 0;
    }
  }
  .label {
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    &.label-success {
      background: #0abf71;
    }
    &.label-warning {
      background: #ff8000;
    }
    &.label-ghost {
      color: #ff8000;
      border: 1px solid #ff8000;
      padding: 2px 4px;
      border-radius: 4px;
    }
  }
}

.shadow {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  overflow-y: scroll;
}
</style>
